<template>
  <div>
    <h2>欢迎使用三维人体数据管理系统</h2>
    <h3>你好, Admin用户</h3>
    <el-card>
      <el-row>
        <el-col :span="13"><img src="../assets/bgPic.jpg" class="bgPic"/></el-col>
        <el-col :span="11">
          <h3>数据管理记录</h3>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="id"
              label="测量ID">
            </el-table-column>
            <el-table-column
              prop="date"
              label="操作时间">
            </el-table-column>
            <el-table-column
              prop="user"
              label="提交者">
            </el-table-column>
            <el-table-column
              prop="isOpen"
              label="操作">
              <template v-slot:default="slotProps">
                <el-tag size="mini" v-if="slotProps.row.isOpen===0">添加</el-tag>
                <el-tag type="success" size="mini" v-else-if="slotProps.row.isOpen===1">更新</el-tag>
                <el-tag type="danger" size="mini" v-else>删除</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '34',
        date: '2020-05-02',
        user: 'Alice',
        isOpen: 0
      }, {
        id: '25',
        date: '2020-05-01',
        user: 'Tom',
        isOpen: 1
      }, {
        id: '33',
        date: '2020-04-30',
        user: 'Kimming',
        isOpen: 0
      }, {
        id: '22',
        date: '2020-04-28',
        user: 'Kimming',
        isOpen: 2
      }, {
        id: '32',
        date: '2020-04-26',
        user: 'Xiyou',
        isOpen: 0
      }]
    }
  },
  created() {
    window.sessionStorage.setItem('navState', '')
  }
}
</script>

<style lang="less" scoped>
  .bgPic {
    margin-top: 10px;
    margin-left: 35px;
    height: 365px;
  }
</style>
